<template>
  <view>
    <view class="title" v-for="(item, index) in list" :key="index">
      <view class="title-box">
        <view class="title-box-left">{{item.title}}</view>
        <view class="title-box-right">{{item.updateTime}}</view>
      </view>
      <view class="title-content" v-for="(ele, idx) in item.datas" :key="idx">
        <view class="title-content-top">[{{ele.q}}]</view>
        <view class="title-content-bottom" v-for="(info, rf) in ele.a" :key="rf">{{info}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {
            title: '抽奖相关说明',
            update: '更新时间',
            datas: [
              {
                q: '奖品类型',
                a: ['奖品分为实物、优惠券、积分、红包', '实物通过物流或者自提发放', '优惠券可用来购买商品','积分可以兑换抽奖次数，也可以兑换商品','红包金额可用于提现，也可用于购买商品']
              },
              {
                q: '奖品标签',
                a: ['物流--代表中奖后由物流发货', '自提--代表中奖后需要到商家提取', '一起中--代表每个人都有参与抽奖机会', '粉丝抽奖--代表只有关注了商家才有抽奖机会'],
              },
              {
                q: '抽奖类型',
                a: ['手动抽奖--到了开奖时间需要手动参与', '自动开奖--到了开奖时间自动开奖']
              },
              {
                q: '开奖通知',
                a: ['参与自动开奖抽奖时订阅消息通知，开完奖会有小程序消息提示', '参与手动开奖抽奖时设置开奖闹钟，开奖时闹钟提醒']
              },
              {
                q: '抽奖次数',
                a: [
                  '用户注册成功获得10次抽奖次数', 
                  '分享新用户注册，双方各获得10次抽奖，不限分享次数',
                  '连续签到7天会获得额外抽奖次数', 
                  '参与手动开奖未抽奖会获得次数返回',
                  '积分兑换可获得抽奖次数',
                  '微信支付可获得抽奖次数',
                  '参与自动开奖抽奖会消耗次数',
                  '参与手动开奖并抽奖会消耗次数',
                ]
              },
              {
                q: '奖品发放',
                a: ['点击【我的】--【我的奖品】--去兑奖/去核销，确认兑奖信息--提交/核销', '平台收到确认信息就会根据资料进行奖品发放']
              }
            ]
          }
        ]
      }
    },
    methods: {
      
    }
  }
</script>

<style lang="scss">
.title {
  width: 710rpx;
  padding: 20rpx;
  margin: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  &-box {
    display: flex;
    justify-content: space-between;
    &-left {
      font-size: 28rpx;
      font-weight: bold;
      color: #000;
    }
    &-right {
        font-size: 24rpx;
        color: #ccc;
    }
  }
  &-content {
    background: rgba(0,0,0,.2);
    margin-top: 20rpx;
    padding: 20rpx;
    &-top {
      font-size: 26rpx;
      color: #df4b43;
    }
    &-bottom {
      font-size: 24rpx;
    }
  }
}
</style>
